<template>
    <div class="product_item_container" :class="[showBorder ? 'scale-1px' : '']">
        <div class="product_img">
            <img :src="productItem.image||productItem.picture">
        </div>
        <div class="product_info_wrap">
            <div class="product_info_title">
                {{productItem.name||productItem.productName}}
            </div>
            <div class="product_info_specs">
                <div class="cart-product-desc-item">
                    {{ showSpec(productItem) }}
                </div>
            </div>
        </div>
        <div class="product_info_right">
            <div class="product_info_price">
                <span class="dp-price">¥{{productItem.dpPrice||productItem.scPrice||productItem.price}}</span>
                <span class="sc-price" v-if="productItem.scPrice && (productItem.scPrice != productItem.dpPrice )">¥{{ productItem.scPrice }}</span>
            </div>
            <div class="product_info_number">
                &times;{{productItem.number}}
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: 'productListItem',
        props: {
            productItem: {
                required: true
            },
            showBorder: {
                default: true
            }
        },
        methods: {
            showSpec(cartItem) {
                return (cartItem.specs || []).map(item => item.specItemName).concat(
                    (cartItem.attributes || []).map(item => item.attributeItemName),
                    (cartItem.addons || []).map(item => item.addonItemName)
                ).join(",")
            }
        }
    }
</script>
<style scoped>
.product_item_container {
    display: flex;
    padding: 8px 10px;
    background: #fefefe;
}
.product_img {
    width: 2rem;
    height: 2rem;
}
.product_img img {
    width: 100%;
    height: 100%;
}
.product_info_wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    padding-left: 10px;
    flex-direction: column;
}
.product_info_title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product_info_right {
    width: 2rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: right;
}
.product_info_specs {
    color: #555;
    display: flex;
}
.product_info_price {
    color: #fe0000;
}
.product_info_number {
    color: #666;
}
.sc-price {
    margin-left: 4px;
    text-decoration: line-through;
    color: #666;
    font-size: 10px;
}

</style>